<template>
    <div :v-loading="loading">

        <!-- 1 查询人员 -->
        <div v-if="type===1" style="margin-top: 20%; ">

            <!--查询-->
            <div style="margin-left: 20%;">
                <el-input placeholder="请输入ID编码" v-model="id" style="margin-bottom: 18px; width: 80%"/>
                <el-input placeholder="请输入身份证号码" v-model="id_num" style="margin-bottom: 18px; width: 80%"/>

                <el-button type="info" size="small" style="width: 80%;"
                           @click.native="ifQueryEntrance(1)">点击查询
                </el-button>
            </div>

            <!--信息-->
            <el-form :model="userData" ref="userData" class="demo-ruleForm" v-if="queryEntrance">

                <hr style="margin-top: 20px; margin-bottom: 20px; ">

                <el-form-item label="姓名:" label-width="80px">
                    <el-input style="width: 80%" readonly :placeholder="userData.name"/>
                </el-form-item>
                <el-form-item label="乡镇:" label-width="80px">
                    <el-input style="width: 80%" readonly :placeholder="userData.country "/>
                </el-form-item>
                <el-form-item label="行政村:" label-width="80px">
                    <el-input style="width: 80%" readonly :placeholder="userData.village"/>
                </el-form-item>

                <el-button type="primary" size="small" style="margin-left: 15%;width: 70%;margin-bottom: 18px"
                           @click.native="openDialogIfEditor()">继 续
                </el-button>
                <el-button type="warning" size="small" plain style="margin-left: 15%;width: 70%;margin-bottom: 18px"
                           @click.native="ifQueryEntrance(2)">信息不符合
                </el-button>
            </el-form>

            <!--说明-->
            <el-form :model="userData" ref="userData" class="demo-ruleForm" v-if="ifMessage">
                <hr style="margin-top: 20px; margin-bottom: 20px; ">

                <el-form-item label="说明:" label-width="80px">
                    <el-input placeholder="请补充说明什么不符合" v-model="message"
                              type="textarea"
                              rows="3"
                              style="width: 80%;"/>
                </el-form-item>

                <el-button type="warning" size="small" plain style="margin-left: 15%;width: 70%;margin-bottom: 18px"
                           @click.native="ifQueryEntrance(2)">提交
                </el-button>
            </el-form>


            <!--提示框-->
            <el-dialog :visible.sync="dialogIfEditor" width="90%">
                <span>该用户已经填过信息, 是否重新修改?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogIfEditor = false">取 消</el-button>
                    <el-button type="primary" @click="ifQueryEntrance(3)">确 定</el-button>
                 </span>
            </el-dialog>

        </div>

        <!-- 2 上传图片 -->
        <div v-if="type===2">
            <el-form style="margin-top: 20px">
                <el-form-item label="门头照:" label-width="100px" v-if="!imgType1">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData1"
                               :before-upload="beforeUpload"
                               multiple
                               :on-change="handleChange"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="门头照:" label-width="100px" v-if="imgType1">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(1)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="户口本/身份证(户主):" label-width="100px" v-if="!imgType2">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData2"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="户口本/身份证(户主):" label-width="100px" v-if="imgType2">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(2)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="户口本/身份证(低保户):" label-width="100px" v-if="!imgType3">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData3"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="户口本/身份证(低保户):" label-width="100px" v-if="imgType3">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(3)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="持证照片:" label-width="100px" v-if="!imgType4">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData4"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="持证照片:" label-width="100px" v-if="imgType4">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(4)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="存折/社保卡:" label-width="100px" v-if="!imgType5">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData5"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="存折/社保卡:" label-width="100px" v-if="imgType5">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(5)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="残疾证:" label-width="100px" v-if="!imgType6">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData6"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="残疾证:" label-width="100px" v-if="imgType6">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(6)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="看病材料:" label-width="100px" v-if="!imgType7">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData7"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="看病材料:" label-width="100px" v-if="imgType7">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(7)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="其他补充材料:" label-width="100px" v-if="!imgType8">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData8"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="其他补充材料:" label-width="100px" v-if="imgType8">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(8)">点击切换详情
                    </el-button>
                </el-form-item>


                <el-form-item label="户主/低保户(手持证件照):" label-width="100px" v-if="!imgType9">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData9"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="户主/低保户(手持证件照):" label-width="100px" v-if="imgType9">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(9)">点击切换详情
                    </el-button>
                </el-form-item>


                <el-form-item label="房子(外观+内景):" label-width="100px" v-if="!imgType10">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData10"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="房子(外观+内景):" label-width="100px" v-if="imgType10">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(10)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="家电:" label-width="100px" v-if="!imgType11">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData11"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="家电:" label-width="100px" v-if="imgType11">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(11)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="轿车:" label-width="100px" v-if="!imgType12">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData12"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="轿车:" label-width="100px" v-if="imgType12">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(12)">点击切换详情
                    </el-button>
                </el-form-item>


                <el-form-item label="问卷:" label-width="100px" v-if="!imgType13">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               multiple
                               :on-change="handleChange"
                               :data="imgData"
                               :file-list="imgTypeData13"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="问卷:" label-width="100px" v-if="imgType13">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(13)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-dialog :visible.sync="dialogVisible" width="90%">
                    <img style="width: 100%;height: 100%" :src="dialogImageUrl" alt="">
                </el-dialog>

                <el-dialog :visible.sync="dialogVisible1" width="90%">
                    <div style="margin-left: 10%" v-html="dialogMessage"></div>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">继续编辑</el-button>
                    <el-button type="primary" @click="saveUserResearch()">确 定</el-button>
                 </span>
                </el-dialog>


                <div class="div_button">
                    <el-button type="success" size="small" style="margin-left: 15%;width: 70%;"
                               @click.native="submitQuestionnaire()">提交问卷
                    </el-button>
                </div>

            </el-form>
        </div>

    </div>
</template>


<script>

import {getToken} from "../utils/dataStorage";
import {GetUserApi, SaveUserResearchApi, UserMessageDiscrepancyApi} from "../api/api";
// import oss from "@/utils/oss";
import Config from '../config/app.js'

    export default {
        data() {
            return {
                //  公共 属性
                type: 1,
                loading: false,

                //  1
                id: "",     //  id编号
                id_num: "", //  搜索的身份证号

                queryEntrance: false,   //  查询信息
                userData: {},           //  查询的人员信息

                ifMessage: false,   //  说明
                message: "",        //  不符合说明

                ifEditor: "",       //  true 已审核
                dialogIfEditor: false,  //  是否重新修改

      //  2 -> 上传图片
      // imgUpload: 'http://cdn.zbjlife.cn/api/upload',
      imgUpload:  Config.apiUrl+"/upload",
      imgData: {
        userId: ""
      },
      dialogVisible: false,   //  图片详情窗口
      dialogImageUrl: '',     //  图片详情
      dialogVisible1: false,  //  提交确认窗口
      dialogMessage: "",      //  提交确认提示内容

                //  图片上传显示窗口
                imgType1: false,
                imgType2: true,
                imgType3: true,
                imgType4: true,
                imgType5: true,
                imgType6: true,
                imgType7: true,
                imgType8: true,
                imgType9: true,
                imgType10: true,
                imgType11: true,
                imgType12: true,
                imgType13: true,

                //  本地的图片列表
                imgTypeData1: [],
                imgTypeData2: [],
                imgTypeData3: [],
                imgTypeData4: [],
                imgTypeData5: [],
                imgTypeData6: [],
                imgTypeData7: [],
                imgTypeData8: [],
                imgTypeData9: [],
                imgTypeData10: [],
                imgTypeData11: [],
                imgTypeData12: [],
                imgTypeData13: [],


                //  上传的图片列表
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                fileList5: [],
                fileList6: [],
                fileList7: [],
                fileList8: [],
                fileList9: [],
                fileList10: [],
                fileList11: [],
                fileList12: [],
                fileList13: []
            };
        },
        methods: {
            //  上传图片时的 图片校验
            beforeUpload(file, fileList) {
                console.log(file)
                let _this = this;
                return new Promise((resolve, reject) => {
                    let isLt2M = file.size / 1024 / 1024 < 50; // 判定图片大小是否小于50MB
                    if (!isLt2M) {
                        reject()
                    }
                    let image = new Image(), resultBlob = '';
                    image.src = URL.createObjectURL(file);
                    image.onload = () => {
                        // 调用方法获取blob格式，方法写在下边
                        resultBlob = _this.compressUpload(image, file);
                        resolve(resultBlob)
                    };
                    image.onerror = () => {
                        reject()
                    }
                })
            },
            // 上传图片成功回调
            handleSuccess(res, fileList) {
                console.log("-------------handleSuccess-----------------")
                if (!this.imgType1) this.fileList1.push(res.data);
                else if (!this.imgType2) this.fileList2.push(res.data);
                else if (!this.imgType3) this.fileList3.push(res.data);
                else if (!this.imgType4) this.fileList4.push(res.data);
                else if (!this.imgType5) this.fileList5.push(res.data);
                else if (!this.imgType6) this.fileList6.push(res.data);
                else if (!this.imgType7) this.fileList7.push(res.data);
                else if (!this.imgType8) this.fileList8.push(res.data);
                else if (!this.imgType9) this.fileList9.push(res.data);
                else if (!this.imgType10) this.fileList10.push(res.data);
                else if (!this.imgType11) this.fileList11.push(res.data);
                else if (!this.imgType12) this.fileList12.push(res.data);
                else if (!this.imgType13) this.fileList13.push(res.data);
            },


            // 文件状态改变时的钩子
            handleChange(file, fileList) {
                console.log("-------------handleChange-----------------");
                if (!this.imgType1) this.imgTypeData1 = fileList;
                else if (!this.imgType2) this.imgTypeData2 = fileList;
                else if (!this.imgType3) this.imgTypeData3 = fileList;
                else if (!this.imgType4) this.imgTypeData4 = fileList;
                else if (!this.imgType5) this.imgTypeData5 = fileList;
                else if (!this.imgType6) this.imgTypeData6 = fileList;
                else if (!this.imgType7) this.imgTypeData7 = fileList;
                else if (!this.imgType8) this.imgTypeData8 = fileList;
                else if (!this.imgType9) this.imgTypeData9 = fileList;
                else if (!this.imgType10) this.imgTypeData10 = fileList;
                else if (!this.imgType11) this.imgTypeData11 = fileList;
                else if (!this.imgType12) this.imgTypeData12 = fileList;
                else if (!this.imgType13) this.imgTypeData13 = fileList;
            },

            //  移除文件列表
            handleRemove(file, fileList) {
                console.log("-------------handleRemove-----------------")
                console.log(file)
                this.fileList1 = this.fileList1.filter(td => td.url != file.response.data.url);
                this.fileList2 = this.fileList2.filter(td => td.url != file.response.data.url);
                this.fileList3 = this.fileList3.filter(td => td.url != file.response.data.url);
                this.fileList4 = this.fileList4.filter(td => td.url != file.response.data.url);
                this.fileList5 = this.fileList5.filter(td => td.url != file.response.data.url);
                this.fileList6 = this.fileList6.filter(td => td.url != file.response.data.url);
                this.fileList7 = this.fileList7.filter(td => td.url != file.response.data.url);
                this.fileList8 = this.fileList8.filter(td => td.url != file.response.data.url);
                this.fileList9 = this.fileList9.filter(td => td.url != file.response.data.url);
                this.fileList10 = this.fileList10.filter(td => td.url != file.response.data.url);
                this.fileList11 = this.fileList11.filter(td => td.url != file.response.data.url);
                this.fileList12 = this.fileList12.filter(td => td.url != file.response.data.url);
                this.fileList13 = this.fileList13.filter(td => td.url != file.response.data.url);



                this.imgTypeData1 = this.imgTypeData1.filter(td => td.uid != file.uid);
                this.imgTypeData2 = this.imgTypeData2.filter(td => td.uid != file.uid);
                this.imgTypeData3 = this.imgTypeData3.filter(td => td.uid != file.uid);
                this.imgTypeData4 = this.imgTypeData4.filter(td => td.uid != file.uid);
                this.imgTypeData5 = this.imgTypeData5.filter(td => td.uid != file.uid);
                this.imgTypeData6 = this.imgTypeData6.filter(td => td.uid != file.uid);
                this.imgTypeData7 = this.imgTypeData7.filter(td => td.uid != file.uid);
                this.imgTypeData8 = this.imgTypeData8.filter(td => td.uid != file.uid);
                this.imgTypeData9 = this.imgTypeData9.filter(td => td.uid != file.uid);
                this.imgTypeData10 = this.imgTypeData10.filter(td => td.uid != file.uid);
                this.imgTypeData11 = this.imgTypeData11.filter(td => td.uid != file.uid);
                this.imgTypeData12 = this.imgTypeData12.filter(td => td.uid != file.uid);
                this.imgTypeData13 = this.imgTypeData13.filter(td => td.uid != file.uid);
                console.log(this.fileList1)
                console.log(this.imgTypeData1)
                // if (!this.imgType1) this.imgTypeData1 = fileList;
                // else if (!this.imgType2) this.imgTypeData2 = fileList;
                // else if (!this.imgType3) this.imgTypeData3 = fileList;
                // else if (!this.imgType4) this.imgTypeData4 = fileList;
                // else if (!this.imgType5) this.imgTypeData5 = fileList;
                // else if (!this.imgType6) this.imgTypeData6 = fileList;
                // else if (!this.imgType7) this.imgTypeData7 = fileList;
                // else if (!this.imgType8) this.imgTypeData8 = fileList;
                // else if (!this.imgType9) this.imgTypeData9 = fileList;
                // else if (!this.imgType10) this.imgTypeData10 = fileList;
                // else if (!this.imgType11) this.imgTypeData11 = fileList;
                // else if (!this.imgType12) this.imgTypeData12 = fileList;
                // else if (!this.imgType13) this.imgTypeData13 = fileList;
            },

            /* 图片压缩方法-canvas压缩 */
            compressUpload(image, file) {
                console.log("-------------compressUpload-----------------")
                console.log(file)
                let canvas = document.createElement('canvas');
                let ctx = canvas.getContext('2d');
                let initSize = image.src.length;
                let {width} = image, {height} = image;
                canvas.width = width;
                canvas.height = height;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(image, 0, 0, width, height);

                // 进行最小压缩0.1
                let compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.1);

                // 压缩后调用方法进行base64转Blob，方法写在下边
                let blobImg = this.dataURItoBlob(compressData);

                console.log(blobImg)

                return blobImg
            },

            /* base64转Blob对象 */
            dataURItoBlob(data) {
                let byteString;
                if (data.split(',')[0].indexOf('base64') >= 0) {
                    byteString = atob(data.split(',')[1])
                } else {
                    byteString = unescape(data.split(',')[1])
                }
                let mimeString = data
                    .split(',')[0]
                    .split(':')[1]
                    .split(';')[0];
                let ia = new Uint8Array(byteString.length);
                for (let i = 0; i < byteString.length; i += 1) {
                    ia[i] = byteString.charCodeAt(i)
                }
                return new Blob([ia], {type: mimeString})
            },


            //  点击查看大图
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.response.data.url;
                this.dialogVisible = true;
            },

            //  获取用户信息
            getUser() {
                GetUserApi({
                    id: this.id,
                    id_num: this.id_num,
                }).then(data => {
                    this.userData = data.data;
                    this.imgData.userId = data.data.id;
                    this.ifEditor = data.ifEditor;

                    this.ifMessage = false;
                    this.queryEntrance = true;
                }).catch(_ => {
                });
            },
            //  人员信息不符 插入备注
            userMessageDiscrepancy() {
                UserMessageDiscrepancyApi({
                    id: this.userData.id,
                    message: this.message,
                    token: getToken(),
                }).then(_ => {
                }).catch(_ => {
                });
            },


            // 查询人员ID
            ifQueryEntrance(type) { //  type: 1.查询人员 2.不符合 3.跳转编辑页面
                if (type === 1) {
                    this.userData = {};
                    if (!this.id) {
                        this.queryEntrance = false;
                        return this.$message({type: 'warning', message: '请输入ID编码', center: true});
                    }
                    if (!this.id_num) {
                        this.queryEntrance = false;
                        return this.$message({type: 'warning', message: '请输入身份证号码', center: true});
                    } else {
                        this.getUser();
                    }
                } else if (type === 2) {
                    if (!this.ifMessage) {
                        this.message = "";
                        this.ifMessage = true;
                    } else {
                        if (!this.message) return this.$message({type: 'warning', message: '请填写说明备注', center: true});
                        this.userMessageDiscrepancy();
                        this.ifMessage = false;
                        this.queryEntrance = false;
                        this.id = "";
                        this.id_num = "";
                    }
                } else if (type === 3) {
                    this.type = 2;
                }
            },
            //  是否提交过问卷
            openDialogIfEditor() {
                //  0 未审核  1 已审核  2 审核失败（不符合）
                if (this.ifEditor) {
                    this.dialogIfEditor = true;
                } else {
                    this.type = 2;
                }
            },
            //  提交问卷
            saveUserResearch() {
                SaveUserResearchApi({
                    token: getToken(),
                    userId: this.imgData.userId,
                    imgTypeData1: this.fileList1,
                    imgTypeData2: this.fileList2,
                    imgTypeData3: this.fileList3,
                    imgTypeData4: this.fileList4,
                    imgTypeData5: this.fileList5,
                    imgTypeData6: this.fileList6,
                    imgTypeData7: this.fileList7,
                    imgTypeData8: this.fileList8,
                    imgTypeData9: this.fileList9,
                    imgTypeData10: this.fileList10,
                    imgTypeData11: this.fileList11,
                    imgTypeData12: this.fileList12,
                    imgTypeData13: this.fileList13,

                }).then(_ => {
                    this.InitializationData();
                    this.$message({type: 'success', message: '表单提交成功', center: true})
                }).catch(_ => {
                });
            },


            // 提交问卷
            submitQuestionnaire() {
                /* 提示有什么图片没有上传 */
                let message = "";   //  提示 什么没有上传
                if (this.imgTypeData1.length === 0) message = message + "<br>门头照 没有上传;";
                if (this.imgTypeData2.length === 0) message = message + "<br>户口本/身份证(户主) 没有上传;";
                if (this.imgTypeData3.length === 0) message = message + "<br>户口本/身份证(低保户) 没有上传;";
                if (this.imgTypeData4.length === 0) message = message + "<br>持证照片 没有上传;";
                if (this.imgTypeData5.length === 0) message = message + "<br>存折/社保卡 没有上传;";
                if (this.imgTypeData6.length === 0) message = message + "<br>残疾证 没有上传;";
                if (this.imgTypeData7.length === 0) message = message + "<br>看病材料 没有上传;";
                if (this.imgTypeData8.length === 0) message = message + "<br>其他补充材料 没有上传;";
                if (this.imgTypeData9.length === 0) message = message + "<br>户主/低保户(手持证件照) 没有上传;";
                if (this.imgTypeData10.length === 0) message = message + "<br>房子(外观+内景) 没有上传;";
                if (this.imgTypeData11.length === 0) message = message + "<br>家电 没有上传;";
                if (this.imgTypeData12.length === 0) message = message + "<br>轿车 没有上传;";
                if (this.imgTypeData13.length === 0) message = message + "<br>问卷 没有上传;";


                if((this.imgTypeData1.length
                    + this.imgTypeData2.length
                    + this.imgTypeData3.length
                    + this.imgTypeData4.length
                    + this.imgTypeData5.length
                    + this.imgTypeData6.length
                    + this.imgTypeData7.length
                    + this.imgTypeData8.length
                    + this.imgTypeData9.length
                    + this.imgTypeData10.length
                    + this.imgTypeData11.length
                    + this.imgTypeData12.length
                    + this.imgTypeData13.length) < 10){
                    return this.$message({type: 'warning', message: '上传图片总数量少于10张！禁止上传', center: true});
                }

                if (message !== "") {
                    this.dialogMessage = "注意: " + message + " <br>是否确认提交?";
                    this.dialogVisible1 = true;
                } else {
                    this.saveUserResearch();
                }
            },

            // 切换图片详情
            switchButton(type) {
                this.imgType1 = true;
                this.imgType2 = true;
                this.imgType3 = true;
                this.imgType4 = true;
                this.imgType5 = true;
                this.imgType6 = true;
                this.imgType7 = true;
                this.imgType8 = true;
                this.imgType9 = true;
                this.imgType10 = true;
                this.imgType11 = true;
                this.imgType12 = true;
                this.imgType13 = true;

                if (type === 1) this.imgType1 = false;
                else if (type === 2) this.imgType2 = false;
                else if (type === 3) this.imgType3 = false;
                else if (type === 4) this.imgType4 = false;
                else if (type === 5) this.imgType5 = false;
                else if (type === 6) this.imgType6 = false;
                else if (type === 7) this.imgType7 = false;
                else if (type === 8) this.imgType8 = false;
                else if (type === 9) this.imgType9 = false;
                else if (type === 10) this.imgType10 = false;
                else if (type === 11) this.imgType11 = false;
                else if (type === 12) this.imgType12 = false;
                else if (type === 13) this.imgType13 = false;
            },
            //  初始化数据
            InitializationData() {
                this.type = 1;

                this.id = "";
                this.id_num = "";
                this.queryEntrance = false;
                this.userData = {};
                this.ifMessage = false;
                this.message = false;
                this.ifEditor = false;
                this.dialogIfEditor = false;
                this.dialogVisible = false;
                this.dialogImageUrl = "";
                this.dialogVisible1 = false;
                this.dialogMessage = "";

                this.imgTypeData1 = [];
                this.imgTypeData2 = [];
                this.imgTypeData3 = [];
                this.imgTypeData4 = [];
                this.imgTypeData5 = [];
                this.imgTypeData6 = [];
                this.imgTypeData7 = [];
                this.imgTypeData8 = [];
                this.imgTypeData9 = [];
                this.imgTypeData10 = [];
                this.imgTypeData11 = [];
                this.imgTypeData12 = [];
                this.imgTypeData13 = [];


                //  上传的图片列表
                this.fileList1 = [];
                this.fileList2 = [];
                this.fileList3 = [];
                this.fileList4 = [];
                this.fileList5 = [];
                this.fileList6 = [];
                this.fileList7 = [];
                this.fileList8 = [];
                this.fileList9 = [];
                this.fileList10 = [];
                this.fileList11 = [];
                this.fileList12 = [];
                this.fileList13 = [];
            }
        },
        created() {
            if (!getToken()) this.$router.push("/");
        }
    }

</script>

<style>

    /*  公共  */
    .div_button {
        margin-bottom: 60px;
        margin-top: 60px
    }

    .form_button2 {
        margin-left: 10%;
        width: 80%;
    }


    /*  ------------------ 图片 ------------------ */

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}


</style>
